<template>
  <canvas id="Timeline"></canvas>
</template>

<script setup>
import Timeline from "@losting/timeline";

import { onMounted, onBeforeUnmount } from "vue";
onMounted(() => {
  drawLine();
  window.addEventListener("resize", drawLine);
});
const drawLine = () => {
  const timeline = new Timeline("#Timeline", {
    fill: false,
    width: document.documentElement.clientWidth,
    height: 60,
  });

  // 自定义绘制
  timeline.draw({
    currentTime: 1651827817000,
    areas: [
      {
        startTime: 1651827433000,
        endTime: 1651829413000,
        bgColor: "#f897aa",
      },
      {
        startTime: 1651829533000,
        endTime: 1651832533000,
      },
    ],
  });

  timeline.on("dragged", (timestamp) => {
    console.log(new Date(timestamp));
    // ...
  });
};
onBeforeUnmount(() => {
  window.removeEventListener("resize", drawLine);
});
</script>

<style scoped></style>
